<template>
    <div class="article-detail-wrap">
        <div class="info">
      <div class="avatar">
        <img src="../assets/img.jpg" alt="">
      </div>
      <div class="name">小哈</div>
      <div class="profile">,hhahhfh</div>
    </div>
    <div class="title">{{ articleDetail.title }}</div>
    <div class="text-more">
      <div class="text" v-html="articleDetail.content">
        
      </div>
      <!-- <div v-if="false" class="more">阅读全文<a-icon type="down" /></div> -->
      <div class="update-time">
        编辑于 {{ articleDetail.time }}
      </div>
    </div>
    <div class=" op-btn">
      <div class="small-hand agree" :class="isAgree ? 'active' : '' " @click="agreeArticle(1)"><a-icon type="up" /> 赞同{{ articleDetail.likeNum }}</div>
      <div class="small-hand disagree" :class="isDisagree ? 'active' : '' " @click="agreeArticle(0)"><a-icon type="down" /></div>
      <div class="small-hand comment marginR20"><a-icon type="wechat" />评论</div>
      <div class="small-hand share marginR20" :class="isShare ? 'active' : '' " @click="shareArticle"><a-icon type="share-alt" />分享</div>
      <div class="small-hand collect marginR20" :class="isCollect ? 'active' : '' " @click="handleCollectArticle"><a-icon type="star" />收藏</div>
      <!-- <div class="like marginR20"><a-icon type="heart" />喜欢</div> -->
      <div class="report">
        <a-popover :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model="isClickEllipsis" trigger="click" placement="bottom">
          <div @click="hideEllipsis" slot="content">
            <span>举报</span>
          </div>
          <a-icon type="ellipsis" />
        </a-popover>
      </div>
    </div>
    <div class="comment-wrap">
        <!-- 这个地方不用$route获取articleId，而直接写的话会报错 -->
        <Message :articleId="$route.query.articleId"></message>
    </div>
    </div>
  </template>
  
  <script>
  import {getArticleDetail,likeArticle,collectArticle,isCollectArticle,isLikeArticle} from "@/api/request"
  import Message from "@/components/comments/Message"
  export default {
    name: 'articleDetail',
    components: {
        Message
    },
    data(){
      return{
        articleId:undefined,
        articleDetail:{},
        isClickEllipsis:false,
        isAgree:false,
        isDisagree:false,
        isShare:false,
        isCollect:false
      }
    },
    methods:{
        clickEllipsis(){
        this.isClickEllipsis=true
        },
        hideEllipsis(){
        this.isClickEllipsis=false
        },
        handleGetArticleDetail(articleId){
            getArticleDetail({'articleId':articleId}).then(res=>{
                console.log(res,'aa')
                if(res.data.status===0){
                    this.articleDetail=res.data.data
                }
            })
        },
        shareArticle(){
            let url = window.location.href;

            // 创建临时文本输入框并设置值为URL
            let tempInput = document.createElement('input');
            tempInput.value = url;
            document.body.appendChild(tempInput);

            // 选中文本并复制
            tempInput.select();
            document.execCommand('copy');

            // 移除临时文本输入框
            document.body.removeChild(tempInput);

            // 提示用户已复制
            this.$message.success('链接已复制到剪贴板！');
            this.isShare=true
        },
        agreeArticle(isLike){
            // let {userId}=JSON.parse(localStorage.getItem("userInfo"))
            //更新点赞表
            if(isLike){
                this.isAgree=!this.isAgree
                if(this.isAgree==true){
                    this.isDisagree=false
                }
            }else{
                this.isDisagree=!this.isDisagree
                if(this.isDisagree==true){
                    this.isAgree=false
                }
            }
            likeArticle({
                "publishId":this.$route.query.articleId,
                "type":1,
                "isAgree":this.isAgree,
                "isDisagree":this.isDisagree
            }).then(res=>{
                console.log(res)
                if(res.data.status===0){
                    this.$message.success('成功！')
                    this.handleGetArticleDetail(5)
                }
                else{
                    this.$message.error('点赞失败！')
                }
            })
        },
        handleCollectArticle(){
            this.isCollect=!this.isCollect
            let obj={
                "articleId":this.$route.query.articleId,
                "fileFolderId":-1,
                "isCollect":this.isCollect
            }
            collectArticle(obj).then(res=>{

                if(res.data.status===0){
                    this.$message.success(res.data.message)
                }else{
                    this.$message.error(res.data.message)
                }
            })
        },
        handleIsCollectArticle(articleId){
            isCollectArticle({
                articleId
            }).then(res=>{
                // console.log('aaa',res)
                if(res.data.status===0){
                    this.isCollect=res.data.data.isCollect
                }
            })
        },
        hanldeIsLikeOrNotLike(articleId){
            isLikeArticle({
                "publishId":articleId
            }).then(res=>{
                console.log('11',res)
                if(res.data.status===0){
                    this.isAgree=res.data.data.isLike
                    this.isDisagree=res.data.data.isNotLike
                }
            })
        }
    },
    mounted(){
        const { articleId } = this.$route.query;
        this.articleId=articleId
        // console.log('aaa',this.articleId)
        //获取文章详情
        //todo,这里把5替换为articleId
        this.handleGetArticleDetail(5)
        this.handleIsCollectArticle(1)
        this.hanldeIsLikeOrNotLike(1)
    }
  }
  </script>
  
  <style scoped lang="less">
  .active{
      color: rgb(247, 98, 98)!important;
    }
  .article-detail-wrap{
    .update-time{
        font-size: 12px;
    }
  .extra-info{
    color: #8590a6;
    margin-bottom: 6px;
    font-size: 16px;
  }
  .info{
    display: flex;
    .avatar{
      width: 24px;
      height: 24px;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .name{
      font-weight: 600;
    }
  }
  .title{
    font-weight: 800;
    font-size: 20px;
    margin: 20px 0;
  }
  .text-more{
    .more{

    }
  }
  .op-btn{
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    i{
      font-size: 14px;
      margin-right: 10px;
    }
    .marginR20{
      margin-right: 20px;
    }
    .agree,.disagree{
      background-color: #afc5ee;
      color: #056de8;
      padding: 5px;
      border-radius: 5px;
      i{
        font-size: 14px;
        margin-right: 0;
      }
    }
    .disagree{
      margin:0 30px 0 10px;
    }
  }
}
  </style>
  